import React, { Component } from "react";
import axios from "../../utils/axios";
// 引入全部频道标签栏
import { connect } from "react-redux";
import "./Home1.scss";
import RotaionChart from './RotationChart'

let num=0;
class Home1 extends Component {

  
  constructor(props) {
    super(props);
    this.state = {
      ListArray: [],
      ZYListArray: [],
      RotaionList:[]
    };
    this.myAllList=React.createRef();
    this.myul=React.createRef();
   if(this.props.labeIndex===0){
    this.props.history.push('/')
   }
   console.log(111);
  }
  componentDidMount(props){
    this.setState({
      ZYListArray: [],
    },function(){
      axios
        .get(
          "item/list.json?__timestamp=1598345634394&categoryId=" + this.props.id
        )
        .then((res) => {
          let data=Array.from(res.data.data.categoryItemList)[0]
          this.setState({
            ListArray: Array.from(res.data.data.categoryItemList),
            ZYListArray: this.state.ZYListArray.concat(data),
            RotaionList:Array.from(res.data.data.currentCategory.bannerList),
          },function(){
            // console.log(this.state.RotaionList);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    })
  }
  componentWillReceiveProps(nextProps) {
    this.setState({
      ZYListArray: [],
      RotaionList:[]
    },function(){
      axios
        .get(
          "item/list.json?__timestamp=1598345634394&categoryId=" + nextProps.id
        )
        .then((res) => {
          let data=Array.from(res.data.data.categoryItemList)[0]
          this.setState({
            ListArray: Array.from(res.data.data.categoryItemList),
            ZYListArray: this.state.ZYListArray.concat(data),
            RotaionList:Array.from(res.data.data.currentCategory.bannerList),
          },function(){ 
          });
        })
        .catch((err) => {
          console.log(err);
        });
    })
  }

  // 滚动事件
  rollAllList(){
      let topHeight=this.myAllList.current.scrollHeight*0.6
      if(this.myAllList.current.scrollTop>=topHeight){
        num++;
        this.setState({
          ZYListArray: this.state.ZYListArray.concat(this.state.ListArray[num]),
        },function(){
        })
      }
    }
  render() {
    if(this.state.RotaionList.length!==0){
    return (
      <div> 
        {/* 标签栏开始 */}
        {/* <LabelBar lef={this.props.sumLeftWidth}></LabelBar> */}
        {/* 标签栏结束 */}
        <div className='aa' ref={this.myAllList} onScroll={(params) => {
        this.rollAllList();
      }
      }>
        {/* 轮播图开始 */}
        <RotaionChart data={this.state.RotaionList}></RotaionChart>
        {/* 轮播图结束 */}
      
        <div className='everyAllList'   >
        {this.state.ZYListArray.map((v, i) => (
          <div key={i} className="allList">
            <h2>{v.category.name}</h2>
            <h3>{v.category.frontName}</h3>
            {v.itemList.map((value, index) => (
              <section key={index} onClick={() => {
                this.props.history.push("/ProductDetail/?id=" + value.id);
              }}>
                <img src={value.listPicUrl} alt=''></img>
                <p>{value.name}</p>
                <span>￥{value.retailPrice}</span>
              </section>
            ))}
            <i></i>
          </div>
        ))}

        </div>
        

        </div>
       
      </div>
    );}
    else{
      return null;
    }
  }
}


// object.onscroll=function(){myScript}

const mapStateToProps = (state) => {
  return {
    id: state.getIn(["home", "id"]),
    labeIndex:state.getIn(['home','labeIndex']),
    sumLeftWidth:state.getIn(['home','sumLeftWidth'])
  };
};

const MapDispatchToProps = (dispatch) => {
  return {};
};

export default connect(mapStateToProps, MapDispatchToProps)(Home1);
